<div fxFlexFill fxLayout="column" class="selector" #selector>
  <header class="selector-title">{{deviceCategoryName}}选择</header>
  <section class="selector-content">
    <section class="selector-content-turb">
      <header class="content-turb-title" (mouseenter)="onDeviceSelectorMouseEnter($event)" (mouseleave)="onDeviceSelectorMouseLeave($event)">
        <span fxFlexFill class="title-text">{{deviceCategoryName}}</span>
        <div class="turbine-selector" [ngClass]="{'active':dispalyDeviceSelector}">
          <app-device-selector
          fxFlexFill
          [deviceGroupCategory]='deviceGroupCategory'
          [display]="dispalyDeviceSelector"
          [selectedFarm]="selectedFarm"
          [selectedFarmId]="selectedFarmId"
          [farmCategory]="farmCategory"
          [deviceCategories]="deviceCategories"
          [multipleFarm]="multipleFarm"
          [selectAGroup]='selectAGroup'
          [multipleDevice]="multipleDevice"
          [multipleModel]="multipleModel"
          [choiceDeviceCount]="choiceDeviceCount"
          [defaultChooseDeviceCount]="defaultChooseDeviceCount"
          [displayGroupToolbar]="displayGroupToolbar"
          [selectedDeviceId]="selectedDeviceId"
          [selectedDevice]="selectedDevice"
          [removeDevice]="removeDevice"
          [isClearSelectDevice]="isClearSelectDevice"
          (selectedDevicesChange)="onSelectedDevicesChange($event)">
          </app-device-selector>
        </div>
      </header>
      <section class="content-turb-main  scrollBar">
        <section *ngFor="let deviceGroup of dispalyDeviceGroups;let i=index">
          <div class="farm" *ngIf="deviceGroup.devices.length>0">
            <header class="farmName"> {{deviceGroup.title}}</header>
            <div class="selector-turbines">
              <span *ngFor="let device of deviceGroup.devices">
                <i>
                  {{device.deviceName}}
                  <b (click)="onRemoveDevice(device)"></b>
                </i>
              </span>
            </div>
          </div>
        </section>
      </section>
    </section>
    <section class="selector-content-turb selector-content-phase" *ngIf="includeTagSelector">
      <header class="content-phase-title" (mouseenter)="onTagSelectorMouseEnter($event)" (mouseleave)="onTagSelectorMouseLeave($event)">
        <span fxFlexFill class="title-text">测点</span>
        <div class="turbine-selector" [ngClass]="{'active':dispalyTagSelector}">
          <app-tag-selector fxFlexFill
          [display]="dispalyTagSelector"
          [selectTages]="selectTages"
          [selectedTagAll]="selectedTagAll"
          [choiceTagCount]="choiceTagCount"
          [tagSet]="tagSet"
          [modelIds]="modelIds"
          [removeTag]="removeTag"
          (selectedTagsChange)="onSelectedTagsChange($event)">
          </app-tag-selector>
        </div>
      </header>
      <section class="content-phase-main  scrollBar">
          <section *ngFor="let tagGroup of dispalyTagGroups;let i=index">
              <div class="farm" *ngIf="tagGroup.tags.length>0">
                <header class="farmName"> {{tagGroup.title!="undefined"?tagGroup.title:"其他系统"}}</header>
                <div class="selector-tag">
                  <span *ngFor="let tag of tagGroup.tags">
                    <i>
                      {{tag.tagName}}
                      <b (click)="onRemoveTag(tag)"></b>
                    </i>
                  </span>
                </div>
              </div>
            </section>
      </section>
    </section>
  </section>
</div>
